<template>
	<hx-navbar title="申请退款"></hx-navbar>
	<view class="submit-container">
		<view class="submit-goods-warp">
			<view> 退款商品 </view>
			<view class="submit-goods">
				<image :src="state.orderItem.picUrl" />
				<view class="right">
					<view class="goods-title u-line-2"> {{ state.orderItem.spuName }} </view>
					<view class="goods-spec" v-if="state.orderItem.specsInfo">{{ state.orderItem.specsInfo }}</view>
					<view class="goods-price">
						<view class="text-price" style="color: red"> {{ state.orderItem.salesPrice }} </view>
						<view class="goods-quantity">x{{ state.orderItem.buyQuantity }} </view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-type-warp">
			<view class="title">服务类型</view>
			<u-radio-group v-model="state.orderRefund.status">
				<u-radio name="1"> 我要退款（无需退货） </u-radio>
				<u-radio name="2"> 我要退货退款 </u-radio>
			</u-radio-group>
		</view>
		<!-- 退款信息 -->
		<view class="submit-info-warp">
			<view class="title">退款信息</view>
			<view class="content">
				<view class="submit-info-bar">
					<view> 退款金额 </view>
					<view class="text-price" style="color: red"> {{ state.orderItem.paymentPrice }} </view>
				</view>
				<view>
					<view class="u-padding-bottom-10"> 退款原因 </view>
					<u-input v-model="state.orderRefund.refundReason" type="textarea" :border="true" />
				</view>
			</view>
		</view>
		<view>
			<u-button type="primary" @click="onsubmit">提交申请</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getById } from '@/api/order/orderItem';
import { addObj } from '@/api/order/orderRefunds';
import { reactive, ref } from 'vue';

const state = reactive<{ orderItem: any; orderRefund: any }>({
	orderItem: {},
	orderRefund: {
		status: '1',
		refundReason: '',
	},
});
onLoad((options) => {
	getOrderItem(options?.orderItemId);
});
const getOrderItem = (orderItemId: string) => {
	getById(orderItemId).then((response) => {
		state.orderItem = response.data;
	});
};
const onsubmit = () => {
	state.orderRefund.orderItemId = state.orderItem.id;
	if (!state.orderRefund.refundReason) {
		uni.showToast({
			title: '请输入退款原因',
			icon: 'none',
			duration: 3000,
		});
		return;
	}
	uni.showModal({
		content: '确认提交申请吗？',
		cancelText: '我再想想',
		success(res) {
			if (res.confirm) {
				addObj(state.orderRefund).then((res) => {
					uni.navigateBack({
						success: () => {
							let page: any = getCurrentPages().pop();
							if (page) {
								page.onLoad(page.options); //执行上个页面的方法
							}
						},
					});
				});
			}
		},
	});
};
</script>

<style lang="scss">
.submit-container {
	padding: 20rpx;
	.submit-goods-warp {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		.submit-goods {
			display: flex;
			padding-top: 10rpx;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1 0 0%;
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					font-size: 28rpx;
				}

				.goods-spec {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909090;
				}

				.goods-price {
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
	.submit-type-warp {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		.title {
			padding: 10rpx 0;
		}
	}
	.submit-info-warp {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		.content {
			padding: 20rpx;
		}
		.submit-info-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
		}
	}
}
</style>
